<template>
  <view class="orderItem">
    <view class="order_info_top_box">
      <view class="order_sn">
        <view v-show="itemData.get_status!=0">
          <span class="mar-right-10">订单编号</span>
          <span>{{ itemData.order_id }}</span>
        </view>
      </view>
      <view class="order_status">
        <span v-if="itemData.get_status==0">待领奖</span>
        <span>{{ statusType[itemData.order_info.status] }}</span>
      </view>
    </view>
    <view class="order_info_center_box">
      <view class="order_goods_img">
        <image :src="itemData.goods_info.cover" mode=""></image>
      </view>
      <view class="order_info_details">
        <view class="order_goods_item_name more-text2">{{ itemData.goods_info.product_name }}</view>
        <view class="order_goods_num">
          <view class="fn-sz-28 fn-cl-666666 mar-right-54">数量: X{{ itemData.goods_info.num }}</view>
        </view>
      </view>
    </view>
    <view class="order_bottom_btn_box">
      <view class="parmary_btn" v-show="itemData.order_info.status=='deliver' "><button @tap="callPhone">联系配送员</button></view>
      <view class="pay_btn" v-show="itemData.get_status == 0"><button @tap="chooseAddress">选择配送地址</button>
      </view>
      <view class="pay_btn" v-show="itemData.order_info.status == 'wait_comment'"><button @tap="commentNow">立即评价</button>
      </view>
    </view>
    <u-modal :show="cancelOrderShow" content="确认取消订单？" @cancel="cancelOrderShow = false" @confirm="confirmCancel" :showCancelButton="true"
      confirmColor="#FED100"></u-modal>
    <u-modal :show="delOrderShow" content="确认删除订单？" @cancel="delOrderShow = false" @confirm="confirmDel" :showCancelButton="true"
      confirmColor="#FED100"></u-modal>
    <u-modal :show="comfirmGetShow" content="确认收货？" @cancel="comfirmGetShow = false" @confirm="comfirmGet" :showCancelButton="true"
      confirmColor="#FED100"></u-modal>
    <ratePopup orderType="prizeGoods" @successSubmitRate="successSubmitRate" :orderInfo="itemData" ref="ratePopup">
    </ratePopup>
    <afterSalePopup @successSubmitRate="successSubmitRate" :orderInfo="itemData" ref="afterSalePopup">
    </afterSalePopup>
  </view>
</template>

<script>
import ratePopup from '../ratePopup/ratePopup.vue';
import afterSalePopup from '../afterSalePopup/afterSalePopup.vue';
export default {
  name: 'prizeOrderItem',
  components: {
    ratePopup,
    afterSalePopup
  },
  props: {
    isGrouper: {
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      cancelOrderShow: false,
      comfirmGetShow: false,
      delOrderShow: false,
      statusType: {
        cancel: '已取消',
        unpay: '待付款',
        payed: '待配送',
        deliver: '配送中',
        wait_comment: '待评价',
        done: '已完成',
        sale_service: '售后',
        wait: '待审核',
        accept: '已退款',
        refuse: '审核拒绝'
      }
    };
  },
  methods: {
    goDetails () {
      uni.navigateTo({
        url: `/pages/order/goodsOrderDetails?order_id=${this.itemData.id}&role=${this.isGrouper}`
      });
    },
    payNow () {
      uni.navigateTo({
        url: `/pages/orderPay/orderPay?order_id=${this.itemData.id}`
      });
    },
    confirmCancel () {
      this.$api.cancelDeliver({
        id: this.itemData.id
      }).then(res => {
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          setTimeout(() => {
            this.$emit('changeOrderStatus');
          }, 300);
        }
      });
    },
    chooseAddress () {
      uni.navigateTo({
        url: `/pages/integralShop/intergralAddress?record_id=${this.itemData.record_id}&pageType=order`
      })
    },
    confirmDel () {
      this.$api.delDeliver({
        order_id: this.itemData.id
      }).then(res => {
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          setTimeout(() => {
            this.$emit('changeOrderStatus');
          }, 300);
        }
      });
    },
    comfirmGet () {
      this.$api.sureDeliver({
        order_id: this.itemData.id
      }).then(res => {
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          setTimeout(() => {
            this.$emit('changeOrderStatus');
          }, 300);
        }
      });
    },
    //现在评价
    commentNow (id) {
      this.$refs.ratePopup.ratePopupShow = true;
      this.$refs.ratePopup.team_product_id = id;
    },
    //申请售后
    applySaleAfter () {
      this.$refs.afterSalePopup.afterSalePopupShow = true;
    },
    //评价成功回调
    successSubmitRate () {
      setTimeout(() => {
        this.$emit('changeOrderStatus');
      }, 300);
    },
    callPhone () {
      uni.makePhoneCall({
        phoneNumber: this.itemData.order_info.deliver_phone
      });
    }
  }
};
</script>

<style lang="scss">
.orderItem {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;

  .order_info_top_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28rpx;
    border-bottom: 1rpx dashed #cccccc;

    .order_sn {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
    }

    .order_status {
      font-size: 30rpx;
      font-weight: bold;
      color: #222222;
    }
  }

  .order_info_center_box {
    display: flex;
    // align-items: center;
    padding: 29rpx 0;
    border-bottom: 1rpx dashed #cccccc;

    .order_goods_img {
      flex: none;
      margin-right: 23rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
    }

    .order_info_details {
      flex: 1;

      .order_goods_item_name {
        font-size: 28rpx;
        font-weight: 400;
        color: #222222;
        margin-bottom: 20rpx;
        padding-top: 6rpx;
        height: 86rpx;
      }

      .order_goods_num {
        .order_goods_num_bottom_box {
          margin-top: 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          button {
            width: 150rpx;
            height: 58rpx;
            font-size: 24rpx;
            line-height: 58rpx;
            border-radius: 33rpx;
            padding: 0;
          }
        }
      }
    }
  }

  .order_bottom_btn_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 24rpx;

    view {
      margin-right: 20rpx;

      button {
        width: 150rpx;
        height: 58rpx;
        font-size: 24rpx;
        line-height: 58rpx;
        border-radius: 33rpx;
        padding: 0;
      }

      &:nth-last-child(1) {
        margin-right: 0rpx;
      }
    }
  }

  .parmary_btn {
    button {
      color: #222222;
      text-align: center;
      background: #ffffff;
      border-radius: 33rpx;
      border: 1rpx solid #cccccc;
    }
  }

  .pay_btn {
    button {
      width: 200rpx !important;
      color: #222222;
      text-align: center;
      background-color: #fed100;
    }
  }
}
</style>